<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>事件委托</title>
</head>

<body>
  <ul id="parent">
    <li>item 1</li>
    <li>item 2</li>
    <div>div</div>
  </ul>

  <script>
    /*
     * 参考博客：https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html
     *
     * 事件委托(事件代理)：将子元素的事件委托给父元素进行代理
     * 1.支持为同一个DOM元素注册多个同类型事件；
     * 2.可将事件分成事件捕获和事件冒泡机制；
     *
     * 优点：
     * 1.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少;
     * 2.新添加元素，可以直接拥有事件；
     *
     * 事件委托原理：
     * 为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。
     * 父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。
     * 并且通过e.target拿到了被点击的button节点。从而可以获取到相应的信息，并作处理。
     *
     * addEventListener(type,listener,useCapture)：
     * type:必须,String类型,事件类型
     * listener: 必须,函数体或者JS方法
     * useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段
     *
     * 如何用原生js给一个按钮绑定多个onclick事件？
     * addEventListener(‘click', func)
     *
     * 如果是以onclick的方式绑定的，如果对同一个元素重复绑定的话，后面的会覆盖前面的。
     * 如果是以addEventLisener方式绑定的话，同一个元素绑定多少次，就会执行多少次。
     * */
    var parentId = document.getElementById("parent");
    // parentId.addEventListener("click", hello);
    // parentId.addEventListener("click", hello2);
    // function hello() {
    //   alert("hello 1");
    // }
    // function hello2() {
    //   alert("hello 2");
    // }

    //事件委托，将子元素的事件委托给父元素进行代理
    parentId.addEventListener("click", function (e) {
      console.log("点击子元素打印", e);
    });
  </script>
</body>

</html>